<template>
  <div class="scheme-detail flex-col-center-start">

    <div class="flex-row-start-center width-100-percent margin-col-10">

      <el-button-group>
        <el-button  v-if="editable"
                    :color="sysConfig.COLOR"
                   :icon="CirclePlus"
                    @click="handleClickOpenEditBtn">{{ showEditBtn ? '隐藏' : '编辑' }}</el-button>
      </el-button-group>
    </div>
    <!--    <InsertTollgateForm></InsertTollgateForm>-->
    <el-empty description="暂无关卡" v-if="!chapterList || chapterList.length === 0">
    </el-empty>
    <!--    章节-->
    <div class="chapter flex-col-center-start width-100-percent"
         v-for="chapter in chapterList"
         :key="chapter.id"
    >
      <!--        章节名-->
      <div class="chapter-name width-100-percent">
          <span style="margin: 5px;font-size: 25px">
            {{ chapter.chapterName }}
          </span>
          <span>
            <el-button
                       @click="handleClickEditChapter(chapter)"
                       v-show="showEditBtn"
                       text
                       >

                <el-icon :color="sysConfig.DANGER_COLOR">
                  <CirclePlus ></CirclePlus>
                </el-icon>
              <span :style="{color:sysConfig.DANGER_COLOR}">  编辑章节</span>
            </el-button>
          </span>
        <span
            style="float: right;right: 0;">{{ computedChapterProgress(chapter) }}/{{ computedChapterLength(chapter) }}</span>
      </div>
      <!--        关卡内容-->
      <div class="tollgate-box flex-row-start-center width-100-percent">
        <el-space wrap class="width-100-percent">
          <div v-for="tollgate in chapter.tollgateList" :key="tollgate.id" class="flex-col-center-start">
            <TollgateManageCard @click="handleSelectTollgate(tollgate,chapter)"
                                :tollgate="tollgate"></TollgateManageCard>
            <el-button-group size="small" v-show="showEditBtn" >
              <el-button text @click="handleClickEditTollgate(tollgate)">
                <el-icon :color="sysConfig.COLOR">
                  <Edit></Edit>
                </el-icon>
                <span :style="{color:sysConfig.COLOR}"> 编辑</span>
              </el-button>
              <el-popconfirm title="确定删除此关卡?"
                             confirm-button-text="确定"
                             cancel-button-text="取消"
                             @confirm="handleDeleteTollgate(tollgate)">
                <template #reference>
                  <el-button text>
                    <el-icon :color="sysConfig.DANGER_COLOR">
                      <CirclePlus ></CirclePlus>
                    </el-icon>
                    <span :style="{color:sysConfig.DANGER_COLOR}">  删除</span>
                  </el-button>
                </template>
              </el-popconfirm>
            </el-button-group>
          </div>


        </el-space>
        <el-button v-show="showEditBtn"
                   :color="sysConfig.DANGER_COLOR"
                   @click="handleClickInsertTollgateBtn(chapter)"
                   :icon="CirclePlusFilled">
          添加关卡
        </el-button>
      </div>
      <el-divider border-style="dashed"/>
    </div>
    <el-button v-show="showEditBtn"
               :color="sysConfig.DANGER_COLOR"
               @click=" showChapterForm=true"
               :icon="CirclePlusFilled">添加章节
    </el-button>

    <el-drawer
        destroy-on-close
        v-model="showTollgateForm"
        title="添加关卡"
        :append-to-body="true"
        :size="computedSizeByIsPc"
    >
      <!--      关卡表单-->
      <InsertTollgateForm @submit="handleTollgateSubmit"
                          :tollgate-id="tollgateId"
                          :chapter-id="chapterId" :scheme-id="schemeId"></InsertTollgateForm>
    </el-drawer>

    <el-drawer
        destroy-on-close
        v-model="showChapterForm"
        title="添加章节"
        :append-to-body="true"
        :size="computedSizeByIsPc"
    >
      <!--      关卡表单-->
      <InsertChapterForm @submit="handleChapterSubmit"  :chapter-id="chapterId" :scheme-id="schemeId"></InsertChapterForm>
    </el-drawer>

  </div>
</template>

<script setup lang="ts">
import {computed, defineEmits, defineProps, ref, watch,withDefaults} from "vue"
import {Chapter, Tollgate,} from "@/ts/scheme";
import TollgateManageCard from "@/components/tollgate/TollgateManageCard.vue";
import {CirclePlus, CirclePlusFilled, Edit} from "@element-plus/icons";
import InsertTollgateForm from "@/components/form/InsertTollgateForm.vue";
import {isPC} from "@/utils/CommonUtil";
import InsertChapterForm, {InsertChapterFormType} from "@/components/form/InsertChapterForm.vue";
import {getChaptersWithTollgates} from "@/api/chapter/ChapterApi";
import sysConfig from "@/config/index"
import {Delete} from "@element-plus/icons-vue";
import {deleteTollgate} from "@/api/tollgate/TollgateApi";
import {ElMessage} from "element-plus";


let emit = defineEmits<{
  // eslint-disable-next-line no-unused-vars
  (e: "selectTollgate", val: Tollgate, chapter: Chapter): void
}>()
let props =withDefaults( defineProps<{
  editable:boolean
  schemeId: string
}>(),{
  editable:false
})
// 显示关卡和章节的操作按钮
let showEditBtn = ref(false)
let showTollgateForm = ref(false)
let showChapterForm = ref(false)
let chapterList = ref<Chapter[]>([])
let chapterId = ref("0")
let tollgateId = ref("0")
getChapterList()


let computedChapterProgress = computed(() => {
  return (chapter: Chapter) => {
    let num = 0

    // 章节无关卡返回0
    if (!chapter.tollgateList) {
      return 0
    }
    // 累计progress大于0的关卡
    chapter.tollgateList.forEach(tollgate => {
      num += tollgate.progress > 0 ? 1 : 0
    })
    return num
  }
})
function handleDeleteTollgate(tollgate:Tollgate){
  deleteTollgate(tollgate.id).then(resp=>{
    if(resp.code === 200){
      ElMessage({
        type:"success",
        message:"删除成功"
      })
      getChapterList()
    }
  })
}
function getChapterList(): void {
  getChaptersWithTollgates(props.schemeId).then(resp => {
    // @ts-ignore
    if (resp.code === 200) {
      chapterList.value = resp.data
    }
  })

}

let computedChapterLength = computed(() => {
  return (chapter: Chapter) => {
    return chapter.tollgateList ? chapter.tollgateList.length : 0
  }

})
let computedSizeByIsPc = computed(() => {
  return isPC() ? '50%' : '100%'
})

function handleSelectTollgate(tollgate: Tollgate, chapter: Chapter) {

  emit("selectTollgate", tollgate, chapter)
}
function handleClickEditTollgate(tollgate:Tollgate){

    // 编辑关卡
    tollgateId.value = tollgate.id
    showTollgateForm.value = true

}
function handleClickEditChapter(chapter:Chapter){
  chapterId.value = chapter.id
  showChapterForm.value=true
}

function handleTollgateSubmit() {
  getChapterList()
  showTollgateForm.value = false
}

function handleChapterSubmit(chapter: InsertChapterFormType) {
  getChapterList()
  showChapterForm.value = false
}

// 点击添加关卡按钮
function handleClickInsertTollgateBtn(chapter: Chapter) {
  showTollgateForm.value = true
  chapterId.value = chapter.id
}

// 点击开启编辑按钮功能
function handleClickOpenEditBtn() {
  showEditBtn.value = !showEditBtn.value
}

watch(() => props.schemeId, (newV) => {
  getChapterList()
}, {
  immediate: true,
})
</script>

<style scoped lang="less">
.scheme-detail {
  overflow-y: scroll;

  .chapter {
    .chapter-name {
      color: gray;
      border-radius: 5px;
    }

    .tollgate-box {

    }

  }

}

::-webkit-scrollbar {
  //滚动条整体样式,高宽分别对应横竖滚动条的尺寸
  width: 0;
  height: 13px;
}
</style>